
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>icf</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/public/layui/admin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/public/layui/admin/style/admin.css" media="all">
  <style>
        .layui-card-header {
            /*position: relative;*/
            height: 52px;
            /*line-height: 42px;*/
            /*padding: 0 15px;*/
            color: #333;
            border-radius: 2px 2px 0 0;
            border-bottom: none;
            font-size: 14px;
        }

        .layui-form-label {
            float: left;
            display: block;
            font-weight: 400;
            line-height: 20px;
            padding: 9px 10px;
            text-align: left;
            width: auto;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 30px;
            /*margin-top: 5px;*/
        }

        .layui-table-cell {
            height: auto;
            line-height: 20px;
        }
  </style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-form layui-card-header">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="keyword" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="list-search">搜索</button>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">AppId {{data.UrlParam.AppId}} - 菜单配置 </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-body">
            <!-- 表格 -->
            <table class="layui-hide" id="data-table" lay-filter="data-table"></table>
            <!-- 嗮选表单字段 -->
            <script type="text/html" id="data-table-filter">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
              </div>
            </script>
            <!-- 操作工具栏 -->
            <script type="text/html" id="data-table-toolbar">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit-child">子菜单</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="/public/layui/admin/layui/layui.js"></script>
  <script>
      layui.config({
        base: '/public/layui/admin/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use(['index','table','jquery'], function(){
        var $ = layui.$;
        var table = layui.table;
        table.render({
          elem: '#data-table'
		  ,url: '/adminSaas/AdminSaasMenu/listjson'  + '?appid={{data.Who.MiniAppId}}&tid={{data.Who.TenantId}}' + '&menu_mode={{data.MenuMode}}'
          ,where : {"keyword":""}
          ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
          ,toolbar: '#data-table-filter'
          ,cols: [[
            {field:'id',title: 'id', hide:true },
            // {field:'if_del',title: 'deleted', hide:true },
            // {field:'cdate',title: 'create', hide:false },
            // {field:'udate',title: 'update', hide:false },
            // {field:'pid',title: '父菜单', hide:false },
            {field:'name',title: '菜单名', hide:false },
            {field:'url',title: '链接', hide:false },
            {field:'m_type',title: '类型', hide:false },
            {field:'show',title: '显示', hide:false },
            {field:'sort_idx',title: '排序', hide:false },
			{field:'check',title: 'check', hide: true},
			{field:'mini_app_id',title: 'mini_app_id', hide: false},
				
            {fixed: 'right', title:'操作', toolbar: '#data-table-toolbar', width:180}
          ]]
          ,page: true
        });

        //头工具栏事件
        table.on('toolbar(data-table)', function(obj){
          switch(obj.event){
            case 'add':{
			  var url = "/adminSaas/AdminSaasMenu/editpage" + '?appid={{data.Who.MiniAppId}}&tid={{data.Who.TenantId}}' + '&menu_mode={{data.MenuMode}}';
              parent.layer.open({
                type: 2, 
                anim: -1,
                area: ['700px','600px'],
                offset: '16px',
                content: url,
                end: function () {
                  window.location.reload();
                }
              });
            }
            break;
          };
        });

        //监听行工具事件
        table.on('tool(data-table)', function(obj){
          var data = obj.data;
          console.log('table on click');
          if(obj.event === 'del'){
            parent.layer.confirm('真的删除行么', function(index){   
              $.ajax({
                type: "POST",
                url : "/adminSaas/AdminSaasMenu/del",
                data: {"id":data.id},
                async: true,
                error: function(request) {
                  alert("删除失败");
                },
                success: function(data) {
                  obj.del();
                  parent.layer.close(index);
                }
              });
            });
          } else if(obj.event === 'edit'){
		    var url ="/adminSaas/AdminSaasMenu/editpage?id=" + data.id + '&appid={{data.Who.MiniAppId}}&tid={{data.Who.TenantId}}'  + '&menu_mode={{data.MenuMode}}';
            parent.layer.open({
              //title: "App<{{data.UrlParam.AppId}}>菜单编辑",
              type: 2, 
              anim: -1,
              area: ['700px','600px'],
              offset: '16px',
              content: url,
              end: function () {
                window.location.reload();
              }
            }); 
          }else if (obj.event === 'edit-child') {
              var url ="/adminSaas/AdminSaasMenu/SubMenu/listpage?pid=" + data.id + '&appid={{data.Who.MiniAppId}}&tid={{data.Who.TenantId}}' + '&menu_mode={{data.MenuMode}}';
              parent.layer.open({
                  title: data.name + '- 子菜单编辑',
                  type: 2,
                  anim: -1,
                  area: ['800px','600px'],
                  offset: '16px',
                  content: url,
                  end: function () {
                      window.location.reload();
                  }
              });
          }
        });

		// 嗮选字段 监听搜索
		form = layui.form;
		form.on('submit(list-search)', function(data){
			refresh()
			/*var field = data.field;
			//执行重载
			table.reload('data-table', {
				where: field
			});*/
		});

		function refresh() {
			var searchKey = $("#keyword").val();
			table.reload('data-table', {
				where: {"keyword":searchKey}
			});
		}

		//监听list整体排序
		table.on('sort(data-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			//console.log(obj.field); //当前排序的字段名
			//console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
			//console.log(this); //当前排序的 th 对象

			//尽管我们的 table 自带排序功能，但并没有请求服务端。
			//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
			table.reload('data-table', {
				initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
				,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
					order_field: obj.field //排序字段   在接口作为参数字段  field order
					,order: obj.type //排序方式   在接口作为参数字段  field order
				}
			});
		});

	});
</script>
</body>
</html>
